<!-- template -->
<template>
  <v-layout>
    <v-app-bar>
      <!-- <template v-slot:image>
        <v-img
          gradient="to top right, rgba(19,84,122,.8), rgba(128,208,199,.8)"
        ></v-img>
      </template> -->
      <template v-slot:prepend>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
      </template>
      <v-app-bar-title>Title</v-app-bar-title>

      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      <v-spacer></v-spacer>
      <v-btn icon class="mr-5">
        <!-- <v-avatar>
          <v-img alt="John" src="src/assets/yh.jpg"></v-img>
        </v-avatar> -->
        <OverlayBadge
          value="4"
          severity="danger"
          class="inline-flex"
          size="small"
        >
          <v-icon>mdi-mail</v-icon>
        </OverlayBadge>
      </v-btn>
      <v-btn icon class="mr-5">
        <Avatar shape="circle" image="src/assets/yh.jpg" size="large" />
      </v-btn>
    </v-app-bar>
    <v-navigation-drawer>

    </v-navigation-drawer>
    <v-main
      class="ml-5 mr-5 align-center justify-center"
      style="min-height: 300px"
    >
      <div class="card flex justify-center">
        <Breadcrumb :home="home" :model="itemsx" />
      </div>
      <OrganizationChart :value="data">
        <template #default="slotProps">
          <span>{{ slotProps.node.label }}</span>
        </template>
      </OrganizationChart>
    </v-main>

    <v-bottom-navigation>
      <v-btn value="recent">
        <v-icon>mdi-history</v-icon>

        <span>Recent</span>
      </v-btn>

      <v-btn value="favorites">
        <v-icon>mdi-heart</v-icon>

        <span>Favorites</span>
      </v-btn>

      <v-btn value="nearby">
        <v-icon>mdi-map-marker</v-icon>

        <span>Nearby</span>
      </v-btn>
    </v-bottom-navigation>
  </v-layout>
</template>
<!-- ts -->
<script setup lang="ts" name="">

const data = ref({
  label: "Argentina",
  children: [
    {
      label: "Argentina",
      children: [
        {
          label: "Argentina",
        },
        {
          label: "Croatia",
        },
      ],
    },
    {
      label: "France",
      children: [
        {
          label: "France",
        },
        {
          label: "Morocco",
        },
      ],
    },
  ],
});

const home = ref({
  icon: "pi pi-home",
});
const itemsx = ref([
  { label: "Electronics" },
  { label: "Computer" },
  { label: "Accessories" },
  { label: "Keyboard" },
  { label: "Wireless" },
]);
</script>
<!-- style -->
<style lang="scss" scoped></style>
